 <meta charset="utf-8">
 <div class="card" id="biz_deviceChannel_config_conatainer" style="padding-bottom: 0px;">
 	<div class="card-body">
 	<div class="row">
 	  <div class="col-md-2 col-lg-2">
             <div id="vlist-div" class="table-responsive"  style="overflow-y: scroll;">
                <table class="table mb-0">
                    <thead>
                        <tr>
							<th><div class="alert alert-danger mb-0" role="alert">当前设备：<strong>【{{device.name}}】</strong>
								<br>针对每路视频请单独保存！</div></th>
                        </tr>
                    </thead>
                    <tbody>
                     	<tr >
							<td><button class="btn btn-outline btn-success btn-block" v-on:click="addNew">创建通道配置</button></td>
                        </tr>
                        <tr v-for="(channel,index) in channelList">
							<td><button class="btn btn-outline btn-danger btn-block"
									    v-on:click="loadChannelDetail(channel.id)">{{channel.name}}</button>
						    </td>
                        </tr>
                        
                       
                        
                    </tbody>
                </table>
             </div>
 	  </div>
 	  
 	  
 	  <div class="col-md-4 col-lg-4">
 	  
 	  			<div class="alert alert-warning" role="alert" v-if="editable">
                                         	当前选择配置类别：<font color="red"><strong>【{{currentChannel.name}}】</strong></font> 
                                         	<strong>请注意保存后再切换!</strong> 
                                          		    
                                   <button type="button"  v-kperms="{perm:''}" class="btn btn-info float-right" style="margin-top:-7px;" v-on:click="save()">
                                        <i class="ti-save" aria-hidden="true" ></i> 保存
                                    </button>
                           </div>

  									     <form role="form"  id="editForm"  v-if="editable">
								            <div class="card-body"> 
											    
											    <div class="form-group" >
								                  <label for="name" class="control-label">通道视频名称</label>
								                  <input type="text" v-model="currentChannel.name" class="form-control"  required="required"/>
								                </div>
								                
											    <div class="form-group" >
								                  <label for="name" class="control-label">通道视频地址</label>
								                  <input type="text" v-model="currentChannel.cameraAddr" class="form-control"  required="required"/>
								                </div>
								                
								                <div class="form-group" >
								                  <label for="unit" class="control-label">用户名</label>
								                  <input type="text" v-model="currentChannel.cameraUserName" class="form-control"  required="required"/>
								                </div>
								                
								                <div class="form-group" >
								                  <label for="unit" class="control-label">密码</label>
								                  <input type="text" v-model="currentChannel.cameraPassword" class="form-control"  required="required"/>
								                </div>
								             
								                 <div class="form-group">
								                  <label for="permCode" class="control-label">备注</label>
								                  <input type="text" v-model="currentChannel.remark" class="form-control"/>
								                </div>
								             
								            </div>
								       </form>
                                        
 	  </div>
 	  
 	    <div class="col-md-6 col-lg-6">
 	  		<div class="alert alert-warning" role="alert" v-if="editable"> 视频预览</div>
			<iframe src="view/device/vedios-content.html?vid=xz1" style="border: 0px;" width="100%" height="100%"></iframe>
                                        
 	  </div>
 	  
 	</div>
 	</div>
 	
 </div>
 

<script>
var anewaz=new Vue({  
	  el: '#biz_deviceChannel_config_conatainer', 
	  data:{
		  searchForm:{
			  name: null,
			  status: null
		  },
		  deviceId: null,
		  device:{},
		  currentChannel:{},
		  channelList:[],
		  itemValueList:[],
		  maxh:500,
		  editable: false,
	      bus:new Vue()
	  },
	  mounted:function(){
		 var _this=this;
		 var param=zfesLayerEditDg.getLayerParam();
		 _this.maxh=param.maxhz;
		 _this.deviceId=param.deviceId;
		  layer.full(layer.index);
		
		 _this.loadDevice(_this.deviceId);
		 
		 _this.loadChannelTable();
		 
		 console.log(_this.maxh);
		 $("#vlist-div").height(_this.maxh);
	  },

    methods: {
    	loadDevice: function(did){
	   		 var _this=this;
	   		 var url="/manger/device/loadDevice";
	       	 var param=zfesLayerEditDg.getLayerParam();
	   		 zfesAjax.ajaxTodo(url,{id:did}, function(data){
	       		 _this.device=data.data.device;
	       	 })
		},
		 loadChannelTable: function(){
	  		 var　_this=this;
	  		 var url="/manager/deviceChannel/loadChannelsByDeviceId";
			    zfesAjax.ajaxTodo(url, {"deviceId": _this.deviceId}, function(data) {
					_this.channelList=data.data.channelList;
					if(_this.channelList&&_this.channelList.length>0){
						_this.currentChannel =_this.channelList[0];
						_this.editable=true;
					}
					
				});
	 	 },
	 	loadChannelDetail : function(channelId){
	 		 var　_this=this;
	 		 console.log(channelId);
	 		_this.channelList.forEach(function(v){  
	 		    if(v.id == channelId){
	 		    	_this.currentChannel=v;
	 		    	_this.editable=true;
	 		    } 
	 		});
	 	},
	 	addNew :function(){
	 		 var　_this=this;
	 		_this.editable=true;
	 		_this.currentChannel={name:""};
	 	},
	 	
	  refresh:function(){
		  var　_this=this;
		  _this.loadChannelTable();
	  },
	  cancel: function(){
		  layer.close(layer.index);
	  },
  	save: function(){
 		 var　_this=this;
 		if($("#editForm").valid()){
    		var _this=this;
    		var url="/manager/deviceChannel/createChannel";
    		if(_this.currentChannel.id){
    			url="/manager/deviceChannel/updateChannel"
    		}
    		_this.currentChannel.deviceId=_this.deviceId;
    		zfesAjax.ajaxTodo(url,_this.currentChannel, function(data){
    			alertSwal.successText(data.message);
    			_this.loadChannelTable();
        	 })
    	}
 		return;
 		
 		 console.log(_this.itemValueList);
 		 $.ajax({
             type: "POST",
             url: "/manager/vedio/saveItemValues",
             contentType: "application/json;charset=utf-8",
             data:JSON.stringify(_this.itemValueList),
             dataType: "json",
             success:function (message) {
                if(message.statusCode==200){
                	alertSwal.successText(message.message);
                }else{
                	alertSwal.warningText(message.message);
                }
             },
             error:function (message) {
            	 alertSwal.warningText(message);
             }
         });
 		 
 	  },
 	
	  
   	
   }

});

function showDetail(row){
	anewaz.showDetail(row);
}
</script>


